<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查找</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
      <el-button type="primary" @click="printInfo" :loading="isExcel">导出成Excel</el-button>
    </el-button-group>
      <el-form inline label-width="100px" @keyup.enter.native="searchHandle">
        <el-form-item label="配镜单号" prop="billId">
          <el-input v-model="dataForm.billId" placeholder="配镜单号"></el-input>
        </el-form-item>
        <el-form-item label="配镜类型" prop="saleType">
          <el-select v-model="dataForm.saleType" placeholder="配镜类型">
            <el-option v-for="item in saleTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-select v-model="dataForm.deptId" placeholder="请选择部门">
            <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顾客卡号" prop="customerCard">
          <el-input v-model="dataForm.customerCard" placeholder="顾客卡号"></el-input>
        </el-form-item>
        <el-form-item label="顾客姓名" prop="name">
          <el-input v-model="dataForm.name" placeholder="顾客姓名"></el-input>
        </el-form-item>
        <el-form-item label="顾客电话" prop="phone1">
          <el-input v-model="dataForm.phone1" placeholder="顾客电话"></el-input>
        </el-form-item>
        <el-form-item label="销售日期">
          <el-col :span="11">
            <el-date-picker type="date" v-model="dataForm.createTimeStart" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" v-model="dataForm.createTimeEnd" value-format="yyyy-MM-dd"style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="销售日期结束" prop="createTimeEnd">
          <el-date-picker v-model="dataForm.createTimeEnd" placeholder="销售日期结束" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item> -->
        <el-form-item label="预计取镜时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.takeMirroTimeStart" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.takeMirroTimeEnd" value-format="yyyy-MM-dd"style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="预计取镜时间起始" prop="takeMirroTimeStart">
          <el-date-picker v-model="dataForm.takeMirroTimeStart" placeholder="预计取镜时间起始" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="预计取镜时间结束" prop="takeMirroTimeEnd">
          <el-date-picker v-model="dataForm.takeMirroTimeEnd" placeholder="预计取镜时间结束" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item> -->
        <el-form-item label="加急状态" prop="urgentStatus">
          <el-select v-model="dataForm.urgentStatus" placeholder="请选择加急状态">
            <el-option v-for="item in urgentStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款状态" prop="payStatus">
          <el-select v-model="dataForm.payStatus" placeholder="请选择付款状态">
            <el-option v-for="item in payStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="付款时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.payTimeStart" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.payTimeEnd" value-format="yyyy-MM-dd"style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="付款时间起始" prop="payTimeStart">
          <el-date-picker v-model="dataForm.payTimeStart" placeholder="付款时间起始" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="付款时间结束" prop="payTimeEnd">
          <el-date-picker v-model="dataForm.payTimeEnd" placeholder="付款时间结束" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item> -->

        <el-form-item label="营业员" prop="payeeUsername">
          <el-input v-model="dataForm.payeeUsername"></el-input>
        </el-form-item>
        <el-form-item label="使用套餐" prop="setmealFlag">
          <el-select v-model="dataForm.setmealFlag" placeholder="请选择付款状态">
            <el-option v-for="item in setmealFlagOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="在途状态" prop="statusSymbolStart">
          <el-select v-model="dataForm.statusSymbolStart">
            <el-option label="=" value="="></el-option>
            <el-option label=">=" value=">="></el-option>
            <el-option label=">" value=">"></el-option>
            <el-option label="<=" value="<="></el-option>
            <el-option label="<" value="<"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="saleStatusStart" label-width="0">
          <el-select v-model="dataForm.saleStatusStart" placeholder="请选择付款状态">
            <el-option v-for="item in saleStatusOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="statusSymbolEnd" label-width="0" v-if="dataForm.statusSymbolStart == '>=' || dataForm.statusSymbolStart == '>'">
          <el-select v-model="dataForm.statusSymbolEnd">
            <el-option label="<=" value="<="></el-option>
            <el-option label="<" value="<"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="saleStatusEnd" label-width="0" v-if="dataForm.statusSymbolStart == '>=' || dataForm.statusSymbolStart == '>'">
          <el-select v-model="dataForm.saleStatusEnd" placeholder="请选择付款状态">
            <el-option v-for="item in saleStatusOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight">
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" @click="infoDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="billId" label="单号" width="150"></el-table-column>
          <el-table-column prop="saleType" label="销售单类型" :formatter="saleTypeFormatter" width="90"></el-table-column>
          <el-table-column prop="mirroDeptName" label="配镜门店"></el-table-column>
          <el-table-column prop="takeMirroDeptName" label="取镜门店"></el-table-column>
          <el-table-column prop="name" label="顾客姓名"></el-table-column>
          <el-table-column prop="saleStatus" label="销售单状态" :formatter="saleStatusFormatter"></el-table-column>
          <el-table-column prop="originalPrice" label="原价总金额"></el-table-column>
          <el-table-column prop="receivablePrice" label="应收金额"></el-table-column>
          <el-table-column prop="createTime" label="销售时间"></el-table-column>
          <el-table-column prop="payTime" label="付款时间"></el-table-column>
          <el-table-column prop="takeMirroTime" label="预计取镜时间"></el-table-column>
          <el-table-column prop="actulTakeMirroTime" label="实际取镜时间"></el-table-column>
          <el-table-column prop="urgentStatus" label="加急状态" :formatter="urgentStatusFormatter"></el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
      <!-- 弹窗，配镜单详情信息 -->
      <info-detail v-if="infoDetailVisible" ref="infoDetail"></info-detail>
  </div>
</template>

<script>
  import { fetchList, getSaleStatus, getGlassesInfoExport } from "@/api/eims/optician/glassesinfo";
  import InfoDetail from "./detail";
  import { mapGetters } from "vuex";
  import { getDeptInfoByDeptType } from '@/api/admin/dept';
  import { filterParams } from "@/util/tools";


  export default {
    data() {
      return {
        isExcel: false,
        dataForm: {
          billId: '',
          deptId: '',
          saleType: '',
          customerCard: '',
          name: '',
          phone1: '',
          createTimeStart: '',
          createTimeEnd: '',
          urgentStatus: '',
          payTimeStart: '',
          payTimeEnd: '',
          payStatus: '',
          payeeUsername: '',
          setmealFlag: '',
          statusSymbolStart: '=',
          statusSymbolEnd: '',
          saleStatusStart: '',
          saleStatusEnd: ''
        },
        saleStatusOption: [],
        saleTypeOptions: [
          { value: '1', label: '隐形订做' },
          { value: '2', label: '框镜订做' },
          { value: '3', label: '隐形成品' },
          { value: '4', label: '框镜成品' },
          { value: '5', label: '辅料' }
        ],
        urgentStatusOptions: [
          { value: '1', label: '正常' },
          { value: '2', label: '加急' }
        ],
        payStatusOptions: [
          { value: '1', label: '已付全款' },
          { value: '2', label: '未付全款' }
        ],
        setmealFlagOptions: [
          { value: '1', label: '使用' },
          { value: '0', label: '不使用' }
        ],
        deptOptions: [],
        dataList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        infoDetailVisible: false
      };
    },
    components: {
      InfoDetail
    },
    created() {
      this.getDataList();
      this.getDeptList();
      this.getOpticianStatus()
    },
    computed: {
      ...mapGetters(["permissions"]),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      // 获取数据列表
      getDataList() {
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        fetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      saleTypeFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case "1":
            return '隐形订做'
            break
          case "2":
            return '框镜订做'
            break
          case "3":
            return '隐形成品'
            break
          case "4":
            return '框镜成品'
            break
          case "5":
            return '辅料'
            break
        }
      },
      saleStatusFormatter(row, column, cellValue, index) {
        let obj = {}
        obj = this.saleStatusOption.find(item => {
          if(item.id == cellValue){
            return obj
          }
        })
        if(obj && obj.name){
          return obj.name
        }
      },
      urgentStatusFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case "1":
            return '正常'
            break
          case "2":
            return '加急'
            break
        }
      },
      infoDetail(data) {
        this.infoDetailVisible = true;
        this.$nextTick(() => {
          this.$refs.infoDetail.init(data.id, data.billId, '在途记录');
        });
      },

      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page);
      },
      getDeptList() {
        getDeptInfoByDeptType(1).then(response => {
          if(response.data.code == '0'){
            let result = response.data.data
            let list = []
            result.forEach(item => {
              list.push({
                value: item.id,
                label: item.name
              })
            })
            this.deptOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取配镜单在途状态列表
      getOpticianStatus(){
        getSaleStatus().then(response => {
          if(response.data.code == '0'){
            this.saleStatusOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 导出Excel
      printInfo() {
        this.isExcel = true
        let startStem = new Date(this.dataForm.createTimeStart).getTime()
        let endStem = new Date(this.dataForm.createTimeEnd).getTime()
        let oneStem = 24*60*60*1000
        if(!this.dataForm.createTimeStart || !this.dataForm.createTimeEnd){
          this.$message.warning('请选择销售时间')
          this.isExcel = false
          return false
        }
        if(startStem <= endStem){
          if(parseFloat(endStem - startStem)/oneStem > 31){
            this.$message.warning('选择日期范围过大，日期范围不能超一个月')
            this.isExcel = false
            return false
          }
        }else{
          this.$message.warning('请选择正确的日期范围')
          this.isExcel = false
          return false
        }
        let params = filterParams(this.dataForm)
        getGlassesInfoExport(params).then(response => {
          var blob = new Blob([response.data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          });
          var reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function(e) {
            var a = document.createElement('a');
            a.download = "配镜单信息.xlsx";
            a.href = URL.createObjectURL(blob);
            a.click();
          }
          this.isExcel = false
        }).catch(() => {
          this.isExcel = false
        })
      },
    }
  };
</script>
